<template>
	<view class="sti_form_page">
		<view class="sti_form_box">
			<view class="mt-20">
				<uni-data-select class="step_select" v-model="info.city_id" :localdata="citylist" @change="changeCity"
					placeholder="请选择定车所在城市"></uni-data-select>
			</view>
			<view v-if="cityError" class="input_tips ml-15">请选择定车所在城市</view>
			<view class="mt-20">
				<uni-data-select class="step_select" v-model="info.company_id" :localdata="companylist"
					@change="changeCompany" placeholder="请选择定车经销商门店" :clear="false"></uni-data-select>
			</view>
			<view v-if="companyError" class="input_tips ml-15">请选择定车经销商门店</view>
			<!-- <view class="mt-20 display_flex">
				<view class="sti_input_box">
					{{info.mobile}}
				</view>
				<button class="code_btn" open-type="getPhoneNumber"
					@getphonenumber="changePhoneNumber">{{info.mobile==''?'获取手机号':'更换手机号'}}</button>
			</view> -->
			<view class="mt-20 sti_input_box">
				<input class="flex-1" v-model="info.name" placeholder="请填写定车姓名" placeholder-style="color:#000000;" />
			</view>
			<view v-if="nameErroe" class="input_tips ml-15">请填写定车姓名</view>
			<view class="mt-20 display_flex">
				<view class="sti_input_box">
					{{info.mobile}}
				</view>
				<view v-if="mobileErrorText" :class="joinStatus?'code_btn_ok':'code_btn'">{{joinStatus?'验证成功':'验证失败'}}
				</view>
			</view>
			<view :class="joinStatus?'input_tips_green ml-15':'input_tips ml-15'">{{mobileErrorText}}
			</view>
			<view class="mt-20 sti_upload_box">
				<view class="display_flex">
					<view class="f-13">上传销售合同</view>
					<view class="f-10 c-999999 ml-10">支持jpg/png，大小不超过20M</view>
				</view>
				<view v-if="contractError" class="input_tips">请上传销售合同</view>
				<view class="upload_border_box" @click="uploadImg(1)">
					<uni-icons type="plus-filled" color="#C80F48" size="18"></uni-icons>
					<view class="f-10">点击上传销售合同照片</view>
				</view>
				<view class="mt-20">
					<uni-row :gutter="20">
						<uni-col v-for="(item,index) in info.contract" :key="index" :span="6">
							<view class="upload_img_box">
								<view class="upload_img_mask">
									<uni-icons @click="delpic(1,index)" type="minus-filled" color="#C80F48"
										size="18"></uni-icons>
								</view>
								<image class="upload_img" :src="picUrl+item" mode="aspectFill"></image>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="mt-20 sti_upload_box">
				<view class="display_flex">
					<view class="f-13">上传定金收据</view>
					<view class="f-10 c-999999 ml-10">支持jpg/png，大小不超过20M</view>
				</view>
				<view v-if="invoiceError" class="input_tips">请上传定金收据</view>
				<view class="upload_border_box" @click="uploadImg(2)">
					<uni-icons type="plus-filled" color="#C80F48" size="18"></uni-icons>
					<view class="f-10">点击上传定金收据</view>
				</view>
				<view class="mt-20">
					<uni-row :gutter="20">
						<uni-col v-for="(item,index) in info.invoice" :key="index" :span="12">
							<view class="upload_img_box">
								<view class="upload_img_mask">
									<uni-icons @click="delpic(2,index)" type="minus-filled" color="#C80F48"
										size="18"></uni-icons>
								</view>
								<image class="upload_img" :src="picUrl+item" mode="aspectFill"></image>
							</view>
						</uni-col>

					</uni-row>
				</view>
			</view>
			<view class="mt-20 sti_upload_box">
				<view class="display_flex">
					<view class="f-13">上传身份证</view>
					<view class="f-10 c-999999 ml-10">请上传您的身份证正反面照片</view>
				</view>
				<view class="mt-20">
					<uni-row :gutter="20">
						<uni-col :span="12">
							<view class="card_img_box" @click="uploadImg(3)">
								<image class="card_img" :src="card_photozm?picUrl+card_photozm:onlinePic+'card_zm.png'">
								</image>
								<view v-if="card_photozm" class="upload_img_mask">
									<view class="upload_again">重新上传</view>
								</view>
								<view v-else class="card_text">
									<uni-icons type="plus-filled" color="#C80F48" size="18"></uni-icons>
									<view class="f-10">上传人像面</view>
								</view>
							</view>
							<view v-if="card_photo_zmError" class="input_tips text-c">请上传身份证人像面</view>
						</uni-col>
						<uni-col :span="12">
							<view class="card_img_box" @click="uploadImg(4)">
								<image class="card_img" :src="card_photofm?picUrl+card_photofm:onlinePic+'card_fm.png'">
								</image>
								<view v-if="card_photofm" class="upload_img_mask">
									<view class="upload_again">重新上传</view>
								</view>
								<view v-else class="card_text">
									<uni-icons type="plus-filled" color="#C80F48" size="18"></uni-icons>
									<view class="f-10">上传国徽面</view>
								</view>
							</view>
							<view v-if="card_photo_fmError" class="input_tips text-c">请上传身份证国徽面</view>
						</uni-col>

					</uni-row>
				</view>
			</view>
			<view @click="changeCheckbox" class="agremment_box" style="margin-bottom: 0;margin-top: 20rpx;">
				<image v-if="isAgree" class="login_checkbox" :src="onlinePic+'checkbox_on.png'">
				</image>
				<image v-else class="login_checkbox" :src="onlinePic+'checkbox.png'">
				</image>
				<span class="agremment_text">我已阅读并同意</span>
				<span @click="goAgreement(info.agreement_id)" class="agremment_text"
					style="color: #33a1ff;">《{{info.agreement_name}}》</span>
			</view>
			<view class="mt-20 submit_btn_block" @click="submitForm">提交信息</view>
		</view>
		<view class=""></view>
		<image v-if="info.bottom_img" class="sti_form_bottom_img" :src="picUrl+info.bottom_img" mode="widthFix"></image>
	</view>
</template>

<script>
	import {
		getStiActiveInfo,
		verifyMobile,
		submitStiForm,
		clubPhoneDecrypt,
		getCityList,
		getCompanyList,
		noticeTemplate
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				info: '',
				isSubmit: true,
				joinStatus: false,
				plist: [],
				clist: [],
				jlist: [],
				citylist: [],
				companylist: [],
				second: 60,
				codeing: false,
				cityError: false,
				companyError: false,
				nameErroe: false,
				mobileError: false,
				mobileErrorText: '',
				codeError: false,
				codeErrorText: '',
				contractError: false,
				invoiceError: false,
				card_photozm: '',
				card_photofm: '',
				card_photo_zmError: false,
				card_photo_fmError: false,
				isAgree: false,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom + 80,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onload')) {
				uni.showLoading({})
				this.getCityList()
				this.getStiActiveInfo()
				uni.removeStorage({
					key: 'onload'
				})
			}
		},
		onLoad() {
			if (uni.getStorageSync('access_token')) {
				this.getCityList()
				uni.showLoading({})
				this.getStiActiveInfo()
			}
			var params = {
				event_code: 'sti宠粉活动',
				path: 'pages/sti/form',
				event_id: '',
				title: '',
				source_page: 'sti宠粉活动-表单',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getStiActiveInfo() {
				getStiActiveInfo({
					huodong_version: 2
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data.info
						if (res.data.info.is_enroll == 1) {
							if (res.data.info.status == 1) {
								uni.navigateTo({
									url: './result'
								})
							}
						}
						if (res.data.info.huodong_join_id > 0) {
							this.isAgree = true
							this.card_photozm = res.data.info.card_photo[0]
							this.card_photofm = res.data.info.card_photo[1]
						}
						if (this.info.mobile == '') {
							this.info.mobile = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo')
								.mobile : ''
							this.verifyMobile(this.info.mobile)
						} else {
							this.verifyMobile(this.info.mobile)
						}
						if (this.info.city_id) {
							this.info.city_id = parseInt(this.info.city_id)
							this.getCompanyList()
						}
						uni.hideLoading()
						//is_enroll:,   是否提交  0 未提交  1 已提交
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changePhoneNumber(e) {
				var that = this
				console.log(e)
				if (e.detail.code) {
					clubPhoneDecrypt({
						code: e.detail.code,
						user_id: uni.getStorageSync('userinfo').user_id
					}).then(res => {
						if (res.state == 1) {
							that.info.mobile = res.data.phone
							that.verifyMobile(res.data.phone)
						} else {
							uni.showToast({
								title: res.error[0],
								mask: true,
								icon: 'none',
								duration: 1500
							})
						}
					})
				}
			},
			verifyMobile(mobile) {
				verifyMobile({
					mobile: mobile,
					huodong_version: 2
				}).then(res => {
					if (res.state == 1) {
						if (res.data.status == 1) {
							this.joinStatus = true
							this.mobileErrorText = res.data.status_text
						} else {
							this.mobileErrorText = res.data.status_text
							this.joinStatus = false
							uni.showModal({
								content: this.mobileErrorText,
								confirmText: '确认',
								showCancel: false,
								success: function(res) {

								}
							});
						}
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getCityList() {
				getCityList({}).then(res => {
					if (res.state == 1) {
						this.citylist = res.data.list
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeCity(e) {
				this.info.city_id = parseInt(e)
				this.cityError = false
				this.info.company_id = ''
				this.companylist = []
				this.getCompanyList()
			},
			getCompanyList() {
				getCompanyList({
					city_id: this.info.city_id,
				}).then(res => {
					if (res.state == 1) {
						this.companylist = res.data.list
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeCompany(e) {
				this.info.company_id = parseInt(e)
				this.companyError = false
			},
			uploadImg(type) {
				var that = this
				if (type == 1 || type == 2) {
					var count = 9
				} else {
					var count = 1
				}
				uni.chooseMedia({
					count: count,
					mediaType: ['image'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						var tempFilePaths = res.tempFiles
						if (type == 1 || type == 2) {
							uni.showLoading({
								title: '正在上传'
							})
							that.uploadImage(tempFilePaths, 0, type)
						} else {
							uni.uploadFile({
								url: app.globalData.uploadUrl,
								filePath: tempFilePaths[0].tempFilePath,
								name: 'img',
								success: (uploadFileRes) => {
									var picdata = JSON.parse(uploadFileRes.data);
									if (type == 3) {
										that.card_photozm = picdata.data.img
										that.card_photo_zmError = false
									} else if (type == 4) {
										that.card_photofm = picdata.data.img
										that.card_photo_fmError = false
									}

								}
							});
						}
					}
				});
			},
			uploadImage(files, i, type) {
				var i
				uni.uploadFile({
					url: app.globalData.uploadUrl,
					filePath: files[i].tempFilePath,
					name: 'img',
					success: (res) => {
						var picdata = JSON.parse(res.data);
						if (type == 1) {
							this.info.contract.push(picdata.data.img)
							this.contractError = false
						} else if (type == 2) {
							this.info.invoice.push(picdata.data.img)
							this.invoiceError = false
						}
						i++
						if (i < files.length) {
							this.uploadImage(files, i, type)
						} else {
							uni.hideLoading()
						}
					}
				});
			},
			delpic(type, index) {
				var that = this
				uni.showModal({
					content: '确定要删除这张图片吗？',
					confirmText: '删除',
					cancelText: "取消",
					success: function(res) {
						if (res.confirm) {
							if (type == 1) {
								that.info.contract.splice(index, 1);
							} else {
								that.info.invoice.splice(index, 1);
							}

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			changeCheckbox() {
				this.isAgree = this.isAgree ? false : true
			},
			goAgreement(id) {
				uni.navigateTo({
					url: '/pages/agreement/agreement?scene=' + id + '&club_id=' + this.info.club_id
				})
			},
			submitForm() {
				if (this.isSubmit) {
					this.isSubmit = false
					if (!this.joinStatus) {
						this.isSubmit = true
						uni.pageScrollTo({
							scrollTop: 0
						})
						uni.showModal({
							content: this.mobileErrorText,
							confirmText: '确认',
							showCancel: false,
							success: function(res) {}
						});
						return false;
					}
					if (this.info.city_id == '') {
						uni.showToast({
							title: '请选择定车所在城市',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.cityError = true
						this.isSubmit = true
						uni.pageScrollTo({
							scrollTop: 0
						})
						return false;
					}
					if (this.info.company_id == '') {
						uni.showToast({
							title: '请选择定车经销商门店',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.companyError = true
						this.isSubmit = true
						uni.pageScrollTo({
							scrollTop: 0
						})
						return false;
					}

					if (this.info.name == '') {
						uni.showToast({
							title: '请填写定车姓名',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.nameErroe = true
						this.isSubmit = true
						uni.pageScrollTo({
							scrollTop: 0
						})
						return false;
					}
					if (this.info.contract.length == 0) {
						uni.showToast({
							title: '请上传销售合同',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.contractError = true
						this.isSubmit = true
						uni.pageScrollTo({
							scrollTop: 50
						})
						return false;
					}
					if (this.info.invoice.length == 0) {
						uni.showToast({
							title: '请上传定金收据',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.invoiceError = true
						this.isSubmit = true
						return false;
					}
					if (this.card_photozm == '') {
						uni.showToast({
							title: '请上传身份证人像面',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.card_photo_zmError = true
						this.isSubmit = true
						return false;
					}
					if (this.card_photofm == '') {
						uni.showToast({
							title: '请上传身份证国徽面',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.card_photo_fmError = true
						this.isSubmit = true
						return false;
					}
					if (!this.isAgree) {
						uni.showToast({
							title: '请阅读并同意《个人隐私保护声明》',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.isSubmit = true
						return false;
					}
					this.info.card_photo = [this.card_photozm, this.card_photofm]
					var that = this
					// #ifdef MP-WEIXIN
					uni.requestSubscribeMessage({
						tmplIds: ['RmPFHUx1IW1qdYz5iDyPVrsIoB0-jNG_UH4eajDcjGE'],
						success: function(res) {
							noticeTemplate({
								template_type: 5 //4:车友会；5:活动报名结果；6:活动创建结果
							}).then(res => {
								if (res.state == 1) {
									that.submitStiForm()
								} else {
									that.isSubmit = true
									uni.showToast({
										title: res.error[0],
										mask: true,
										icon: 'none',
										duration: 1500
									})
								}
							})
						},
						fail: function(e) {
							console.log(e)
							that.isSubmit = true
						}
					})
					// #endif
					// #ifndef MP-WEIXIN
					that.submitStiForm()
					// #endif
				}
			},
			submitStiForm() {
				submitStiForm({
					huodong_join_id: this.info.huodong_join_id,
					name: this.info.name,
					city_id: this.info.city_id,
					company_id: this.info.company_id,
					mobile: this.info.mobile,
					contract: this.info.contract,
					invoice: this.info.invoice,
					card_photo: this.info.card_photo,
					register_channel: uni.getStorageSync('register_channel') ? uni
						.getStorageSync('register_channel') : '',
					huodong_version: 2
				}).then(res => {
					if (res.state == 1) {
						uni.showToast({
							title: '提交成功',
							mask: true,
							icon: 'success',
							duration: 1500
						})
						uni.reLaunch({
							url: "/pages/sti/result"
						})
						this.isSubmit = true
					} else {
						this.isSubmit = true
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #EEEEEE;
	}

	.sti_form_page {
		position: relative;
		min-height: 100vh;

		.sti_form_box {
			padding: 47rpx;

			.step_select {
				.uni-select {
					font-size: 26rpx !important;
					padding-left: 30rpx !important;
					padding-right: 30rpx !important;
					height: 88rpx !important;
					background-color: #ffffff;
					border: 2rpx solid #E9E9E9;
				}

				.uni-select__input-placeholder {
					color: #000000 !important;
					font-size: 26rpx !important;
				}
			}

			.sti_input_box {
				flex: 1;
				display: flex;
				align-items: center;
				height: 88rpx;
				font-size: 26rpx;
				padding: 0 30rpx;
				border-radius: 8rpx;
				background-color: #ffffff;
				border: 1rpx solid #E9E9E9;
			}

			.code_btn {
				height: 88rpx;
				width: 170rpx;
				color: #ffffff;
				font-size: 22rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #C80F48;
			}

			.code_btn_ok {
				height: 88rpx;
				width: 170rpx;
				color: #ffffff;
				font-size: 22rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #23AB5E;
			}

			.code_btn_send {
				height: 88rpx;
				width: 170rpx;
				color: #ffffff;
				font-size: 22rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #E5BAC8;
			}

			.input_tips {
				color: #C80F48;
				font-size: 22rpx;
				margin-top: 11rpx;
			}

			.input_tips_green {
				color: #23AB5E;
				font-size: 22rpx;
				margin-top: 11rpx;
			}

			.sti_upload_box {
				font-size: 26rpx;
				padding: 40rpx 30rpx;
				border-radius: 8rpx;
				background-color: #ffffff;

				.upload_border_box {
					margin-top: 40rpx;
					padding: 25rpx 0;
					text-align: center;
					border: 1rpx solid #EEEEEE;
				}

				.upload_img_box {
					width: 100%;
					height: 168rpx;
					margin-bottom: 20rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					background-color: #F2F2F2;
				}

				.upload_img {
					width: 100%;
					height: 168rpx;
					border-radius: 8rpx;
					vertical-align: middle;
				}

				.card_img_box {
					width: 285rpx;
					height: 200rpx;
					margin-bottom: 20rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
				}

				.card_img {
					position: absolute;
					z-index: 2;
					width: 285rpx;
					height: 200rpx;
					border-radius: 8rpx;
					vertical-align: middle;
				}

				.card_text {
					position: absolute;
					z-index: 2;
					text-align: center;
				}

				.upload_img_mask {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					background-color: rgba(0, 0, 0, .6);
				}

				.upload_again {
					color: #ffffff;
					font-size: 22rpx;
					text-decoration: underline;
				}
			}

			.agremment_box {
				margin-bottom: 180rpx;

				.login_checkbox {
					width: 26rpx;
					height: 26rpx;
					vertical-align: middle;
				}

				.agremment_text {
					color: #191919;
					font-size: 24rpx;
					margin-left: 10rpx;
					vertical-align: middle;
				}
			}

			.submit_btn_block {
				font-size: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 110rpx;
				color: #ffffff;
				margin-bottom: 278rpx;
				border-radius: 8rpx;
				background-color: #C80F48;
			}
		}

		.sti_form_bottom_img {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: -1;
		}
	}
</style>